<script setup>
import { ref,reactive,toRefs,inject,onBeforeMount } from 'vue'
import { ElMessage } from 'element-plus'
import { useItem } from '../../../../store/index.js'
import StringOrNumber from '../../StringOrNumber.vue';

const useItemer = useItem()
const props = defineProps({
  volumeConfig: {
    type: Object,
    default: {}
  },
  method: {
    type: String,
    default: 'Create'
  }
})
onBeforeMount(() => {
  console.log("props.volumeConfig:",props.volumeConfig)
    if(props.method != "Create") {
        data.newVolumeConfig = props.volumeConfig
        console.log("data.newVolumeConfig:",data.newVolumeConfig)
    }
})
const data = reactive({
  newVolumeConfig: {
    name: '',
    emptyDir: {
      type: '',
      // sizeLimit: 0
    }
  },
  mountTypeList: [
    {
      label: "默认",
      value: ""
    },
    {
      label: "内存类型",
      value: "Memory"
    },
  ],
  rules: {
    name: [
        {required: true, message: '请输入Volume名称', trigger: 'blur'}
    ],
  }
})
let formRef = ref()
const submit = () => {
  formRef.value.validate((valid)=>{
    if (valid) {
      console.log('data.newVolumeConfig:',data.newVolumeConfig)
      if (useItemer.item.spec.template.spec.volumes == undefined) {
        useItemer.item.spec.template.spec.volumes = []
      }
      for (let i=0;i<useItemer.item.spec.template.spec.volumes.length;i++) {
        if (useItemer.item.spec.template.spec.volumes[i].name == data.newVolumeConfig.name) {
          // 已经存在相同名字的volume名称
          ElMessage.error('volume不能重复')
          return
        }
      }
      const newVolume = JSON.parse(JSON.stringify(data.newVolumeConfig))

      useItemer.item.spec.template.spec.volumes.push(newVolume)
      console.log(useItemer.item.spec.template.spec.volumes)
      closeDialog()
    }else {
      ElMessage.warning('请完善表单数据')
    }
  })
}
// 订阅关闭dialog的方法
const closeDialog = inject("closeAddVolumeDialog")
const {newVolumeConfig,mountTypeList, rules} = toRefs(data)
</script>

<template>
  <el-form :model="newVolumeConfig" ref="formRef" :rules="rules">
    <el-row :gutter="5">
      <el-col :span="8" v-if="props.method == 'Create'">
          <el-form-item label="volume名称" prop="name" required>
              <el-input v-model.trim="newVolumeConfig.name" style="width:180px" placeholder="请输入volume名称"/>
          </el-form-item>
      </el-col>

      <el-col :span="8">
          <el-form-item label="挂载类型" prop="emptyDir.type">
              <el-select v-model="newVolumeConfig.emptyDir.type" placeholder="请选择挂载类型" :empty-values="[null, undefined]">
                  <el-option
                  v-for="s in mountTypeList"
                  :key="s.value"
                  :label="s.label"
                  :value="s.value"
                  >
                  </el-option>
              </el-select>
          </el-form-item>
      </el-col>

      <el-col :span="8">
          <el-form-item label="限制大小" prop="emptyDir.sizeLimit">
            <StringOrNumber v-model:data="newVolumeConfig.emptyDir.sizeLimit" :default-value="false" input-width="240px" placeholder="限制大小"></StringOrNumber>
          </el-form-item>
      </el-col>
    </el-row>
    <!-- 添加按钮 -->
    <div  v-if="props.method == 'Create'" style="display: flex;">
      <el-button type="primary" @click="submit()" style="margin: 10px auto;">
        添加
      </el-button>
    </div>
  </el-form>
</template>

<style scoped>
</style>
